<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #ff{
            display: block;
            width: 100px;
            height: 50px;
        }
        .swiper-container{
            display: block;
            width: 600px;
            height: 500px;
            /* background: red; */
        }
        .swiper-slide:nth-child(1){
            background: red
        }
        .swiper-slide:nth-child(2){
            background: gray
        }
        .swiper-slide:nth-child(3){
            background: greenyellow
        }
        .swiper-slide:nth-child(4){
            background: rgb(162, 0, 255)
        }
        .swiper-slide:nth-child(5){
            background: pink
        }
        .swiper-slide:nth-child(6){
            background: pink
        }
        .swiper-slide:nth-child(7){
            background: pink
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
</head>
<body>
    <button id="ff">ff</button>
        <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="http://www.jiegeng.com/upload/201806201714332147.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://s3m.mediav.com/galileo/562620-d60eb635ac71a995c4bca1d02238682c.png">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://i2.jun4.com/d/file/20180718/4d69eacb11fa5bdd273781f2e4a41977.jpg">
                    </div>
                    <div class="swiper-slide">
                            <img src="https://s3m.mediav.com/galileo/562620-d60eb635ac71a995c4bca1d02238682c.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://i2.jun4.com/d/file/20180718/4d69eacb11fa5bdd273781f2e4a41977.jpg">
                        </div>
                        <div class="swiper-slide">
                                <img src="https://s3m.mediav.com/galileo/562620-d60eb635ac71a995c4bca1d02238682c.png">
                            </div>
                            <div class="swiper-slide">
                                <img src="https://i2.jun4.com/d/file/20180718/4d69eacb11fa5bdd273781f2e4a41977.jpg">
                            </div>
                </div>
              
            </div>
    <script src="../../static/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
    <script language="javascript"> 
        var num =3;
       
        $("#ff").click(function(){
            // console.log(1)
            num++;
            num = num%7
            console.log(num)
            var mySwiper = new Swiper('.swiper-container',{
                initialSlide :num,
                loop: true,
        // autoplay : 5000
        })
        })
    </script>
</body>
</html>